<template>
  <div>
    <button @click="changeName">改名字</button>
    <button @click="changeAge">改年龄</button>
    <button @click="changePerson">改整体</button>
  </div>
</template>
<script setup lang="ts">
import { reactive, watch } from 'vue'

const person = reactive({ name: '张三', age: 18 })
//房子没换 换了床
function changeName() {
  person.name = '李四'
}
//房子没换 换了沙发
function changeAge() {
  person.age = 19
}
//房子换了
function changePerson() {
  Object.assign(person, { name: '李四', age: 20 })
}
//如果监视的是reactive包裹的值 那么默认创建深层监听，你写不写deep它都是deep为true 且关不掉
watch(person, (newVal, oldVal) => {
  console.log('person 变化', newVal, oldVal)
})
</script>

<style lang="scss" scoped></style>
